<template>
  <div class="main-container">
    <div class="main-header">
      <el-form :inline="true" :model="form" class="demo-form-inline" size="medium" label-width="100px">
        <el-form-item label="选择文件：">
          <el-input placeholder="请输入内容" v-model="form.file">
            <template slot="append">
              <el-button type="primary">浏览</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="x：">
          <el-input v-model="form.x" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="y：">
          <el-input v-model="form.y" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
      <el-radio-group v-model="selectPicType" size="medium">
        <el-radio-button label="1" >散点图</el-radio-button>
        <el-radio-button label="2">xx图</el-radio-button>
        <el-radio-button label="3">热力图</el-radio-button>
      </el-radio-group>
    </div>
    <div class="main-body">
      
      <Scatter v-if="selectPicType == 1"></Scatter>
      <HelloWorld v-else-if="selectPicType == 2"></HelloWorld>
      <Heatmap v-else-if="selectPicType == 3"></Heatmap>
    </div>
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
import Scatter from '@/components/Scatter.vue'
import Heatmap from '@/components/Heatmap.vue'
export default {
  components:{HelloWorld,Scatter,Heatmap},
  data() {
    return {
      form:{
        x:""
      },
      selectPicType:""
    }
  },
  mounted() {
    
  },
  methods: {
    
  }
};
</script>
<style lang="scss" scoped>
.main-container{
  width:100%;
  height:100%;
  padding: 20px;
  .main-header{
    width:100%;
    height: 100px
  }
  .main-body{
    width:100%;
    height: calc(100% - 100px);
    border: 1px solid
  }
}
</style>
